<template>
    <l-layout :top="108">
        <template #top>
            <div class="l-rblock" style="padding:16px 8px 0 8px;" >
                <el-form
                    :model="formData"
                    :rules="rules"
                    size="mini"
                    labelPosition="right"
                    labelWidth="56px"
                    ref="form"
                    >
                    <el-row :gutter="0">
                        <div class="l-rblock">
                            <el-col :span="24" >
                                <el-form-item 
                                    :label="$t('表名')" 
                                    prop="f_TableName"
                                    > 
                                    <el-input v-model="formData.f_TableName" :placeholder="$t('请输入')" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" >
                                <el-form-item 
                                    :label="$t('备注')" 
                                    prop="f_Description"
                                    > 
                                    <el-input v-model="formData.f_Description" :placeholder="$t('请输入')" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </div>
                    </el-row>
                </el-form>
            </div>
        </template>
        <div class="l-rblock" >
            <l-table
                ref="lr_db_codecolumns_table"
                rowKey="f_Id"
                :required="true"
                :isSortable="true"
                :border="false"
                :isShowNum="false"
                :highlightCurrentRow="true"
                :isMultiSelect="true"
                :dataSource="lr_db_codecolumns_data"
                :columns="lr_db_codecolumns_columns"

                @rowClick="handleRowClick"
                >
                <template v-slot:f_DbColumnName="scope" >
                    <el-input size="mini" v-model="scope.row.f_DbColumnName" :placeholder="$t('请输入')" >
                    </el-input>
                </template>
                <template v-slot:f_CsType="scope" >
                    <el-select size="mini" v-model="scope.row.f_CsType" >
                        <el-option 
                        v-for="item in lr_dbtype"
                        :key="item"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                </template>
                <template v-slot:f_Length="scope" >
                    <el-input size="mini" v-model="scope.row.f_Length" :placeholder="$t('请输入')" >
                    </el-input>
                </template>
                <template v-slot:f_DecimalDigits="scope" >
                    <el-input size="mini" v-model="scope.row.f_DecimalDigits" :placeholder="$t('请输入')" >
                    </el-input>
                </template>
                <template v-slot:f_Description="scope" >
                    <el-input size="mini" v-model="scope.row.f_Description" :placeholder="$t('请输入')" >
                    </el-input>
                </template>
                <template v-slot:f_IsNullable="scope" >
                    <el-switch size="mini" :activeValue="0" :inactiveValue="1" v-model="scope.row.f_IsNullable" >
                    </el-switch>
                </template>
                <template v-slot:f_IsPrimaryKey="scope" >
                    <el-switch size="mini" :activeValue="1" :inactiveValue="0" v-model="scope.row.f_IsPrimaryKey" >
                    </el-switch>
                </template>
                <template v-slot:f_IsIdentity="scope" >
                    <el-switch size="mini" :activeValue="1" :inactiveValue="0" v-model="scope.row.f_IsIdentity" >
                    </el-switch>
                </template>

                <vxe-column align="center" width="40" >
                    <template slot-scope="scope">
                        <button 
                            style="color: #f56c6c;"
                            type="button" 
                            @click.stop="handleDeleteRow(scope.$index,scope.row)"
                            class="el-button el-button--text el-button--mini">
                            <i class="el-icon-delete"></i>
                        </button>
                    </template>
                </vxe-column>
            </l-table>
        </div>
    </l-layout>
</template>
<script>
const api = window.$api.data.codeTable
export default {
    data(){
        return {
            formData: {
                f_TableName:"", // 表名
                f_Description:"", // 备注
            },
            rules: {
                f_TableName:[
                    { required: true, message: this.$t('请输入表名')},
                    { pattern: /^[A-Za-z][A-Za-z0-9_]*$/ , message: this.$t('请以字母开头填写字母、数字或下划线'), trigger: ["blur", "change"]},
                    { validator: this.validatorPassword, trigger:  ["blur", "change"] },
                ]
            },
            lr_db_codecolumns_columns:[
                {prop:'f_DbColumnName',label:this.$t('名称'),minWidth:120,required:true},
                {prop:'f_CsType',label:this.$t('类型'),width:120,required:true},
                {prop:'f_Length',label:this.$t('长度'),width:80,patterns:[{msg:this.$t('请填写非负整数或-1'),reg:'/^[1-9]\\d*|0|-1$/'}]},
                {prop:'f_DecimalDigits',label:this.$t('小数点'),width:64,patterns:[{msg:this.$t('请填写非负整数'),reg:'/^\\d+$/'}]},
                {prop:'f_IsNullable',label:this.$t('必填'),width:64,align:'center'},
                {prop:'f_IsPrimaryKey',label:this.$t('主键'),width:64,align:'center'},
                {prop:'f_IsIdentity',label:this.$t('自增'),width:64,align:'center'},
                {prop:'f_Description',label:this.$t('备注'),minWidth:120},
            ],
            lr_db_codecolumns_data:[],

            selectRow:null
        };
    },
    methods: {
        validatorPassword(rule, value, callback) {
             if (value.toLowerCase() == 'null') {
                callback(new Error(this.$t('表名输入不合规范')))
             } else callback()
        },
        handleAddRow(){
            const point = {}
            point.f_Id = this.$uuid()
            point.f_DbColumnName = ""
            point.f_CsType = ""
            point.f_Description = ""
            point.f_Length = 0
            point.f_DecimalDigits = 0
            point.f_IsNullable = 1
            point.f_IsPrimaryKey = 0
            point.f_IsIdentity = 0
            this.lr_db_codecolumns_data.push(point)
        },
        handleInsertRow(){
            if(this.selectRow){
                const point = {}
                point.f_Id = this.$uuid()
                point.f_DbColumnName = ""
                point.f_CsType = ""
                point.f_Description = ""
                point.f_Length = 0
                point.f_DecimalDigits = 0
                point.f_IsNullable = 1
                point.f_IsPrimaryKey = 0
                point.f_IsIdentity = 0
                this.lr_db_codecolumns_data.splice(this.lr_db_codecolumns_data.findIndex(t=>t.f_Id == this.selectRow.f_Id),0,point)
            }
            else{
               this.handleAddRow() 
            }
        },
        handleDeleteRow(index,row){
            this.$confirm(
                `${this.$t('是否删除')}${row.f_DbColumnName}${this.$t('字段?')}`,
                this.$t("提示"),{
                    confirmButtonText: this.$t("确定"),
                    cancelButtonText: this.$t("取消"),
                    type: "warning"
                }
            )
            .then(() => {
                this.lr_db_codecolumns_data.splice(index,1)
                this.$message({
                    type: "success",
                    message: this.$t("删除成功!")
                })
            })
            .catch(() => {
                this.$message({
                    type: "info",
                    message: this.$t("已取消删除!")
                })
            })
        },
        handleDeleteRows(){
            const selectRows = this.$refs.lr_db_codecolumns_table.getSelected()
            if(selectRows.length == 0){
                return
            }
            this.$confirm(
                this.$t("是否删除选中字段?"),
                this.$t("提示"),{
                    confirmButtonText: this.$t("确定"),
                    cancelButtonText: this.$t("取消"),
                    type: "warning"
                }
            )
            .then(() => {
                const resData = this.lr_db_codecolumns_data.filter(t=>selectRows.findIndex(t2=>t2.f_Id == t.f_Id)  == -1)
                this.lr_db_codecolumns_data = resData
                this.$message({
                    type: "success",
                    message: this.$t("删除成功!")
                })
            })
            .catch(() => {
                this.$message({
                    type: "info",
                    message: this.$t("已取消删除!")
                })
            })
        },

        

        // 重置表单
        resetForm() {
            this.lr_db_codecolumns_data = []
            this.formData.f_Id = ''
            this.$refs.lr_db_codecolumns_table.reset()
            this.$refs.form.resetFields()
        },
        // 校验表单
        async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false  
            }
            if(!this.$refs.lr_db_codecolumns_table.validate())
            {
                return false
            }
            



            return true
        },
        // 设置表单数据
        setForm(data) {
            this.$setFormData(this.formData,data.lr_db_codetableEntity)
            this.lr_db_codecolumns_data = data.lr_db_codecolumnsList
        },
        // 获取表单数据
        getForm() {
            const formData = {}
            formData.lr_db_codetableEntity = {}
            formData.lr_db_codetableEntity.f_ClassName = this.formData.f_ClassName // 类名
            formData.lr_db_codetableEntity.f_TableName = this.formData.f_TableName // 表名
            formData.lr_db_codetableEntity.f_Description = this.formData.f_Description // 备注
            formData.lr_db_codecolumnsList = this.lr_db_codecolumns_data
            return formData

        },

        async loadFormData({ keyValue/*,params,node*/ }) {//  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
            const data = await this.$awaitWraper(api.get(keyValue))
            if (data) {
                this.setForm(data)
                return true
            }
            else {
                return false
            }
        },

        async saveForm({ keyValue, isEdit,dbCode/*,code,node*/ }) {// isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
            const postData = this.getForm()
            postData.lr_db_codetableEntity.f_DbId = dbCode
            if (isEdit) {// 编辑
                return await this.$awaitWraper(api.update(keyValue, postData))
            }
            else {// 新增
                return await this.$awaitWraper(api.add(postData))
            }
        },

        handleRowClick(row){
            this.selectRow = row
        }
    }
}
</script>